<template>
  <div class="user_list-page flexC">
    <Tabs value="name1">

      <TabPane label="用例结果" name="name1">
        <div class="user_list-page">
          <div class="user_list-page" style="margin-bottom: 20px;">
            <div class="pageHead">
              <p>用例结果查询</p>
            </div>
            <div class="pageHead">
              <Form ref="tsetcaseForm" :model="tsetcaseForm" inline :label-width="80">
                <FormItem label="用例名称" prop="testcase_name">
                  <Input
                      type="text"
                      v-model="tsetcaseForm.testcase_name"
                      placeholder="请输入环境名称"
                      clearable
                      style="width: 200px"
                  />
                </FormItem>
                <FormItem label="所属项目" prop="project">
                  <Select
                      v-model="tsetcaseForm.project"
                      placeholder="请选择"
                      clearable
                      style="width: 200px"
                  >
                    <Option v-for="(item, index) in prolist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="请求接口" prop="api">
                  <Select
                      v-model="tsetcaseForm.api"
                      placeholder="请选择"
                      clearable
                      style="width: 200px"
                  >
                    <Option v-for="(item, index) in apilist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="测试结果" prop="status">
                  <Select
                      v-model="tsetcaseForm.status"
                      placeholder="请选择"
                      clearable
                      style="width: 200px"
                  >
                    <Option :value= 0>通过</Option>
                    <Option :value= 1>失败</Option>
                  </Select>
                </FormItem>
                <FormItem style="margin-left: -35px" class="br">
                  <Button @click="testreportsSearch" type="primary" icon="ios-search" style="
               margin-right: 10px;"
                  >搜索
                  </Button>
                  <Button @click="testreportsReset('tsetcaseForm')">重置</Button>
                </FormItem>
              </Form>
            </div>


          </div>
          <div class="pageHead" style="padding-left: 0px;">

            <!--              创建环境-->
            <div class="pageHead">
              <!--        创建环境-->
              <div style="display: flex;justify-content: space-between">
                <p>结果列表</p>
                <div>
                  <Icon type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                  <i style="margin-right: 15px;">通过</i>
                  <Icon type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
                  <i style="margin-right: 15px;">部分通过</i>
                  <Icon type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
                  <i style="margin-right: 15px;">失败</i>
                  <template>
                    <Poptip
                        confirm
                        title="确定临时删除用例结果！"
                        @on-ok="testdefalse"
                    >
                      <Button type="warning" size="small">临时删除</Button>
                    </Poptip>

                    <Poptip
                        confirm
                        title="确定永久删除用例结果！"
                        @on-ok="testdetrue"
                    >
                      <Button type="error" size="small" style="margin-left: 10px;">永久删除</Button>
                    </Poptip>
                  </template>
                </div>
              </div>
            </div>
            <!--              用例列表-->
            <div class="pageHead">
              <Table
                  border
                  :columns="columns"
                  :data="data"
                  sortable="custom"
                  ref="table"
                  size="small"
                  @on-selection-change="selectFun"
              >
                <template slot-scope="{ row }" slot="project|interface">
                  <strong>{{ row.project_name }} - {{ row.api_name }}</strong>
                </template>
                <template slot-scope="{ row }" slot="icon">
                  <Icon v-if="row.status == 'PASS'" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                  <Icon v-if="row.status == 'FAIL'" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
                </template>
              </Table>
              <div>
                <Page
                    :total="page.total"
                    :page-size="page.size"
                    :current="page.index"
                    show-total
                    show-elevator
                    show-sizer
                    @on-change="changeSize"
                    @on-page-size-change="changePage"
                    style="margin-top: 20px;"
                />
              </div>
            </div>
          </div>
        </div>
      </TabPane>


      <TabPane label="场景结果" name="name2">
        <div class="user_list-page">
          <div class="user_list-page" style="margin-bottom: 20px;">
            <div class="pageHead">
              <p>场景结果查询</p>
            </div>
            <div class="pageHead">
              <Form ref="suiteForm" :model="suiteForm" inline :label-width="80">
                <FormItem label="场景名称" prop="testsuite_name">
                  <Input
                      type="text"
                      v-model="suiteForm.testsuite_name"
                      placeholder="请输入环境名称"
                      clearable
                      style="width: 200px"
                  />
                </FormItem>
                <FormItem label="所属项目" prop="project">
                  <Select
                      v-model="suiteForm.project"
                      placeholder="请选择"
                      clearable
                      style="width: 200px"
                  >
                    <Option v-for="(item, index) in prolist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="测试结果" prop="status">
                  <Select
                      v-model="suiteForm.status"
                      placeholder="请选择"
                      clearable
                      style="width: 200px"
                  >

                    <Option :value= 0>全部通过</Option>
                    <Option :value= 1>部分通过</Option>
                    <Option :value= 2>全部失败</Option>
                  </Select>
                </FormItem>
                <FormItem style="margin-left: -35px" class="br">
                  <Button @click="suiteSearch" type="primary" icon="ios-search" style="
               margin-right: 10px;"
                  >搜索
                  </Button>
                  <Button @click="suiteReset('suiteForm')">重置</Button>
                </FormItem>
              </Form>
            </div>


          </div>
          <div class="pageHead" style="padding-left: 0px;">

            <div class="pageHead">
              <div style="display: flex;justify-content: space-between">
                <p>结果列表</p>
                <div>
                  <Icon type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                  <i style="margin-right: 15px;">全部通过</i>
                  <Icon type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
                  <i style="margin-right: 15px;">部分通过</i>
                  <Icon type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
                  <i style="margin-right: 15px;">全部失败</i>
                  <Poptip
                        confirm
                        title="确定临时删除场景结果！"
                        @on-ok="suitede(false)"
                    >
                      <Button type="warning" size="small">临时删除</Button>
                    </Poptip>
                  <Poptip
                      confirm
                      title="确定永久删除场景结果！"
                      @on-ok="suitede(true)"
                  >
                    <Button type="error" size="small" style="margin-left: 10px;">永久删除</Button>
                  </Poptip>
                </div>
              </div>
            </div>
            <!--              用例报告列表-->
            <div class="pageHead">
              <Table
                  border
                  :columns="testsuitecolumns"
                  :data="suitedata"
                  sortable="custom"
                  ref="table"
                  size="small"
                  @on-selection-change="suiteselectFun"
              >
                <template slot-scope="{ row }" slot="project|testsuite">
                  <strong>{{ row.project_name }} - {{ row.testsuite_name }}</strong>
                </template>

                <template slot-scope="{ row }" slot="icon">
                  <Icon v-if="row.failed_num <= 0" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/> <!--全部通过-->
                  <Icon v-else-if="row.passed_num < 1" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/> <!--全部失败-->
                  <Icon v-else type="ios-leaf" size="24" color="rgb(255, 153, 0)"/> <!--部分通过-->
                </template>
              </Table>
              <div>
                <Page
                    :total="page.total"
                    :page-size="page.size"
                    :current="page.index"
                    show-total
                    show-elevator
                    show-sizer
                    @on-change="changeSize"
                    @on-page-size-change="changePage"
                    style="margin-top: 20px;"
                />
              </div>
            </div>
          </div>
        </div>
      </TabPane>
    </Tabs>


  </div>
</template>

<script>
import {  test_reports,
          testsuite_reports,
          testcase_reports_Delete,
          projectlist,
          apilist,
          testsuite_reports_Delete
}from '../../api/api'

export default {
  name: "testcase_reports",
  data() {
    return {
      prolist: [],
      apilist:[],
      MultilineId: [],
      suiteMultilineId: [],
      page: {
        index: 1,
        size: 10,
        total: 50
      },
      tsetcaseForm: {
        testcase_name: '',
        project:'',
        api:'',
        status:''

      },
      suiteForm: {
        testsuite_name:'',
        project:'',
        status:''
      },
      data: [],
      suitedata: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "用例名称",
          key: "testcase_name",
          minWidth: 125,
          width: 300,
          align: 'center'
        },
        {
          title: "项目|接口",
          slot: "project|interface",
          minWidth: 200,
          align: 'center'
        },
        {
          title: "请求URL",
          key: "url",
          width: 200,
          minWidth: 200,
          render: (h, params) => {
            let texts = params.row.url
            if (params.row.url != null) {
              if (params.row.url.length > 30) {
                texts = params.row.url.slice(0, 30) + '...' // 进行数字截取
              } else {
                texts = params.row.url
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.url)
              ])
            ])
          }
        },
        {
          title: "响应状态码",
          key: "actual_status_code",
          width: 120,
          align: 'center'
        },
        {
          title: "响应时长(ms)",
          key: "elapsed_ms",
          align: "center",
          width: 120,
        },
        {
          title: "响应结果",
          key: "actual_response_data",
          align: "center",
          width: 200,
          ellipsis: true,
          render: (h, params) => {
            let texts = JSON.stringify(params.row.actual_response_data)
            if (params.row.actual_response_data != null) {
              if (params.row.actual_response_data.length > 30) {
                texts = JSON.stringify(params.row.actual_response_data).slice(0, 30) + '...' // 进行数字截取
              } else {
                texts = JSON.stringify(params.row.actual_response_data)
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, JSON.stringify(params.row.actual_response_data))
              ])
            ])
          }
        },
        {
          title: "失败原因",
          key: "failure_reason",
          align: "center",
          width: 200,
          render: (h, params) => {
            let texts = params.row.failure_reason
            if (params.row.failure_reason != null) {
              if (params.row.failure_reason.length > 20) {
                texts = params.row.failure_reason.slice(0, 20) + '...' // 进行数字截取
              } else {
                texts = params.row.failure_reason
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.failure_reason)
              ])
            ])
          }
        },
        {
          title: "执行时间",
          key: "execute_time",
          align: "center",
          width: 150,
        },
        {
          title: "版本",
          key: "version",
          align: "center",
          width: 130,
        },
        {
          title: "测试结果",
          slot: 'icon',
          align: "center",
          fixed: "right",
          width: 85,
        },
        {
          title: "操作",
          key: "action",
          width: 130,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            {
              enableOrDisable = h(
                  "a",
                  {
                    style: {
                      color: '#19B16B'
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      },
                    },
                  },
                  "报告"
              );
            }
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.enable('crenvs2', params.row);
                      },
                    },
                  },
                  "详情"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              enableOrDisable,
            ]);

          },
        },
      ],
      testsuitecolumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "项目|场景",
          slot: "project|testsuite",
          minWidth: 125,
          width: 300,
          align: 'center'
        },
        {
          title: "用例总数",
          key: "total_num",
          minWidth: 200,
          align: 'center'
        },
        {
          title: "通过数量",
          key: "passed_num",
          width: 200,
          minWidth: 200,
        },
        {
          title: "失败数量",
          key: "failed_num",
          width: 120,
          align: 'center'
        },
        {
          title: "执行耗时(ms)",
          key: "elapsed_ms",
          align: "center",
          width: 120,
        },
        {
          title: "执行时间",
          key: "execute_time",
          align: "center",
          width: 150,
        },
        {
          title: "版本",
          key: "version",
          align: "center",
          width: 130,
        },
        {
          title: "测试结果",
          slot: 'icon',
          align: "center",
          fixed: "right",
          width: 85,
        },
        {
          title: "操作",
          key: "action",
          width: 130,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            {
              enableOrDisable = h(
                  "a",
                  {
                    style: {
                      color: '#19B16B'
                    },
                    on: {
                      click: () => {
                        this.testsuiteedit(params.row.version);
                      },
                    },
                  },
                  "报告"
              );
            }
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.testsuiteenable('crenvs2', params.row);
                      },
                    },
                  },
                  "详情"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              enableOrDisable,
            ]);

          },
        },
      ],
    }
  },

  created() {
    this.getlist()
    this.gettestsuitelist()
    this.getprojectlist()
    this.getapilist()
  },
  methods: {
    // 项目列表
    getprojectlist() {
      projectlist().then(res =>{
        this.prolist = res.data.data
        // console.log(res.data.data)
      })
    },

    // api列表
    getapilist() {
      apilist().then(res =>{
        this.apilist = res.data.data
      })
    },

    // 用例报告搜索
    testreportsSearch() {
      let datas = {
        testcase_name: this.tsetcaseForm.testcase_name,
        project:this.tsetcaseForm.project,
        api:this.tsetcaseForm.api,
        status:this.tsetcaseForm.status === 0 ? 'PASS' : 'FAIL'
      }
      test_reports(datas).then(res => {
        let data = res.data.data
        this.data = data
      })
    },
    // 用例报告搜索重置
    testreportsReset(name) {
      this.$refs[name].resetFields();
      this.getlist()
    },
    // 场景报告搜索
    suiteSearch(){
      let data = {
        testsuite_name:this.suiteForm.testsuite_name,
        project:this.suiteForm.project,
        status:this.suiteForm.status === 0 ? 'PASS' : this.suiteForm.status === 1 ? 'PARTIAL_PASS' : this.suiteForm.status === 2 ? 'FAIL' : ''
      }
      testsuite_reports(data).then(res => {
        let data = res.data.data
        this.suitedata = data
      })
    },
    // 场景报告搜索重置
    suiteReset(name) {
      this.gettestsuitelist();
      this.$refs[name].resetFields();
    },


    // 临时删除用例报告
    testdefalse() {
      let data = {
        'is_de' : false,
        'id':this.MultilineId
      }
      testcase_reports_Delete(data).then(res=> {
        this.$Message.success('用例报告临时删除成功！')
        this.getlist()
      })
    },
    // 永久删除用例报告
    testdetrue() {
      let data = {
        'is_de' : true,
        'id':this.MultilineId
      }
        testcase_reports_Delete(data).then(res=>{
          this.$Message.success('用例报告删除成功！')
          this.getlist()
        })

    },
    // 场景报告删除
    suitede(pw) {
      if (pw === true) {
        let data = {
          'is_de' : true,
          'id':this.suiteMultilineId
        }
        testsuite_reports_Delete(data).then(res => {
          this.$Message.success('场景报告删除成功！')
          this.gettestsuitelist()
        })
      } else {
        let data = {
          'is_de' : false,
          'id':this.suiteMultilineId
        }
        testsuite_reports_Delete(data).then(res => {
          this.$Message.success('场景报告临时删除成功！')
          this.gettestsuitelist()
        })
      }
    },

    // 用例报告所选ID
    selectFun(row) {
      this.MultilineId = row
    },
    suiteselectFun(row) {
      this.suiteMultilineId = row
    },

    gettestsuitelist() {
      testsuite_reports().then(res => {
        this.suitedata = res.data.data
      })
    },

    getlist() {
      let data = {
        'size': this.page.size,
        'page': this.page.index,
        'ordering': '-execute_time'
      }
      test_reports(data).then(res => {
        let data = res.data.data
        this.data = data
        this.page.total = res.data.count
      })
    },

    enable(name, v) {
      this.$router.push({
        name: 'testcase_reports_details',
        params: {
          id: v.id
        }
      })
    },

    testsuiteenable(name, v) {
      // 场景ID
      debugger
      this.$router.push({
        name: 'testsuite_reports_details',
        params: {
          id: v.id
        }
      })
    },
    edit(v) {
      this.$router.push({
        name: 'reports',
        params: {
          id: v.version
        }
      })
    },

    testsuiteedit(v) {
      debugger
      let { href } = this.$router.resolve({
         path: 'reports_suite/'+ v,
         params: { v }
       });
        window.open(href);

      // this.$router.push({
      //   name: 'reports_suite',
      //   params: {
      //     id: v.version
      //   }
      // })
    },

    changeSize(e) {
      let data = {
        'size': this.page.size,
        'page': e,
        'ordering': '-execute_time'
      }
      test_reports(data).then(res => {
        let data = res.data.data
        this.data = data
        this.page.total = res.data.count

      })
    },
    changePage(e) {
      let data = {
        'size': e,
        'page': this.page.index,
        'ordering': '-execute_time'
      }
      test_reports(data).then(res => {
        let data = res.data.data
        this.data = data
        this.page.total = res.data.count
      })
    }
  }
}
</script>

<style scoped>

</style>
